<template>
  <div>
    <van-nav-bar fixed title="商品详情" left-arrow @click-left="$utils.back($route.path);">
      <template #right>
        <svg-icon icon-class="car-new" class="fs-44 color-dark" @goPage="gotoCar" />
      </template>
    </van-nav-bar>
    <div class="has-top has-bottom">
      <!-- 图片 -->
      <PurchaseImgBox :model="purchaseProductModel" />

      <!-- 标题栏 -->
      <PurchaseIntro :model="purchaseProductModel" />

      <!-- 内容切换 -->
      <van-tabs
        ref="tabs"
        v-model="active"
        sticky
        :offset-top="$conf.stickyTop"
      >
        <van-tab title="供货信息">
          <PurchaseStoreList :list="purchaseMemberList" @openSpec="openSpec" @gotoSupplier="gotoSupplier" />
        </van-tab>
        <van-tab title="商品详情">
          <div v-show="purchaseProductModel.Description" class="pt-15" v-html="purchaseProductModel.Description" />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部栏 -->
    <shopCart :product-data="purchaseProductModel" :car-list="carList" @cleanCart="" @updateCart="updateCart" />

    <!-- 商品规格选择弹窗 -->
    <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
      <PurchaseOrderSpec :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />
    </van-popup>
  </div>
</template>

<script>
import PurchaseImgBox from 'components/purchase/imgList'
import PurchaseIntro from 'components/purchase/introduction'
import PurchaseStoreList from 'components/purchase/storeList'
import PurchaseOrderSpec from 'components/purchase/orderSpec'
import shopCart from 'components/purchase/shopCart'
import { GetProductCarPage, GetProductSupplierPage, AddPurchaseCars, GetPurchaseProductDetailPage } from 'api/purchase'
export default {
  name: 'OrderDetail',
  components: { PurchaseImgBox, PurchaseIntro, PurchaseStoreList, PurchaseOrderSpec, shopCart },
  // props: {
  //   productId: { // 商品id
  //     type: Number,
  //     required: true,
  //     default: 0
  //   }
  // },
  data() {
    return {
      productId: 0,
      active: 0,
      // 商品数据
      purchaseProductModel: {},
      purchaseMemberList: [],

      carList: [], // 购物车数据

      SpecIndex: 0,

      // 规格弹窗相关数据
      optPopup: {
        data: {},
        type: '',
        change: false,
        show: false,
        productId: 0,
        purchaseMemberId: 0
      },

      // 获取购物车数据参数
      carRequest: {

      }
    }
  },
  computed: {
  },
  // watch: {
  //   productId(newId, oldId) {
  //     this.GetPurchaseProductDetailPage(newId)
  //   }
  // },
  created() {
    this.productId = this.$route.params.id
    this.GetPurchaseProductDetailPage(this.productId)
  },

  methods: {
    gotoCar() {
      this.$router.push('/purchase/car')
    },
    closePopup() {
      this.optPopup.show = false
    },
    addCart(val) {
      if (val && val.length === 0) {
        this.$toast('加入购物车的商品数量没有改变')
        return
      }
      const _data = {
        carList: val,
        puchaseMemberId: this.optPopup.purchaseMemberId
      }
      this.AddPurchaseCars(_data)
    },
    updateCart(obj) {
      this.AddPurchaseCars(obj)
    },
    openSpec(purchaseMemberId, index) {
      this.SpecIndex = index
      if (this.productId === this.optPopup.productId && this.optPopup.purchaseMemberId === purchaseMemberId) {
        this.optPopup.show = true
      } else {
        this.optPopup.productId = this.productId
        this.optPopup.purchaseMemberId = purchaseMemberId
        this.GetProductCarPage(this.productId, purchaseMemberId)
      }
    },
    gotoSupplier(id) {
      this.$router.push('/purchase/StoreHome/' + id)
    },

    // 获取商品详情
    GetPurchaseProductDetailPage(id) {
      GetPurchaseProductDetailPage({ id: id }).then(res => {
        if (res) {
          this.ProductData = res.Data
          this.purchaseProductModel = res.Data.PurchaseProductModel
          this.purchaseMemberList = res.Data.PurchaseMemberList
          this.GetProductSupplierPage(id)
        }
      })
    },

    // 获取购物车数据
    GetProductSupplierPage(id) {
      GetProductSupplierPage({ id: id }).then(res => {
        if (res) {
          this.carList = res.Data
        }
      })
    },

    // 获取商品规格详情
    GetProductCarPage(id, purchaseMemberId) {
      GetProductCarPage({ id, purchaseMemberId }).then(res => {
        if (res) {
          // 单位列表
          const _data = res.Data
          if (_data.Unit && _data.Unit.indexOf(',') !== -1) {
            _data.UnitList = _data.Unit.split(',')
            _data.BaseUnit = _data.UnitList[0]
          }
          // 换算比例列表
          if (_data.Unitratio && _data.Unitratio.indexOf(':') !== -1) {
            _data.UnitratioList = _data.Unitratio.split(':')
          }
          this.optPopup.data = _data

          this.optPopup.show = true
        }
      })
    },
    AddPurchaseCars(obj) {
      AddPurchaseCars(obj).then(res => {
        if (res) {
          console.log('成功')
          this.optPopup.show = false
          this.GetPurchaseProductDetailPage(this.productId)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
.bottom-box{
  height:120px;
  width:100%;
  .btn{
    position: absolute;
    right: 23px;
    top: 20px;
    width: 220px;
    line-height: 80px;
    border-radius: 40px;
    text-align: center;
  }
}
.checkbox{
 text-align: right;
 padding-right: 65px;
 &:before{
   right: 20px;
 }
 &:after{
   right: 32px;
 }
}
</style>
